我們今天localStorage主要就是學會 「如何讓使用者的資料，不會因為重整或關掉瀏覽器就消失」！

學習概念

1.認識 localStorage

• 瀏覽器內建的儲存空間（Key-Value 格式）。
• 資料會保留在使用者電腦，就算關掉頁面、重開瀏覽器還在。
• 容量大約 5MB，適合存文字、JSON。

2.如何在 Vue 中使用 localStorage

• 存資料：localStorage.setItem('key', JSON.stringify(value))
• 取資料：JSON.parse(localStorage.getItem('key'))
• 刪資料：localStorage.removeItem('key')

3.搭配 Vue 的響應式資料

• 用 ref 或 reactive 管理任務清單。
• 用 onMounted 把 localStorage 的舊資料取出。
• 用 watchEffect 或 watch，當清單變化時，自動寫回 localStorage。

4.跟 sessionStorage 的差別

• localStorage：永久保存（除非手動刪除）。
• sessionStorage：暫時保存（關掉分頁就消失）。

基礎操作解說純 （JavaScript）

// 存資料
localStorage.setItem('mission', '探索火星')

// 取資料
const mission = localStorage.getItem('mission')
console.log(mission) // "探索火星"

// 存物件 → 必須轉 JSON
const crew = { captain: 'Jaina', ship: 'Nebula' }
localStorage.setItem('crew', JSON.stringify(crew))

// 取物件 → 必須解析 JSON
const crewData = JSON.parse(localStorage.getItem('crew'))
console.log(crewData.captain) // Jaina

// 刪除資料
localStorage.removeItem('mission')

// 清空全部
localStorage.clear()

Vue 整合技巧

在 Vue 3 Composition API 中，我們會把 localStorage 與響應式資料結合。

1.用 ref 建立狀態

const missions = ref([])

2.onMounted：載入日誌

onMounted(() => {
  const raw = localStorage.getItem('missions')
  if (raw) missions.value = JSON.parse(raw)
})

3.watchEffect：自動保存

watchEffect(() => {
  localStorage.setItem('missions', JSON.stringify(missions.value))
})

這樣一來，**任務清單變動 → 自動寫回 localStorage。**下次重新整理頁面，還能讀回來。

完整範例：星際任務日誌

建立src/views/MissionLog.vue：

<template>
  <main class="log">
    <h1>🪐 星際任務日誌</h1>

    <!-- 新增任務 -->
    <form @submit.prevent="addMission">
      <input v-model.trim="draft" placeholder="輸入新任務，例如：探索木星" />
      <button>加入</button>
    </form>

    <!-- 清單 -->
    <ul>
      <li v-for="m in missions" :key="m.id">
        <label>
          <input type="checkbox" v-model="m.done" />
          <span :class="{ done: m.done }">{{ m.text }}</span>
        </label>
        <button @click="removeMission(m.id)">❌</button>
      </li>
    </ul>
  </main>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'   // ⬅️ 一定要有 watch！

const STORAGE_KEY = 'missions'

const missions = ref([])
const draft = ref('')

// 第一次載入：從 localStorage 取回
onMounted(() => {
  try {
    const raw = localStorage.getItem(STORAGE_KEY)
    missions.value = raw ? JSON.parse(raw) : []
  } catch (e) {
    console.error('讀取任務失敗：', e)
    missions.value = []
  }
})

// 之後只要 missions 有變化，就寫回 localStorage
watch(
  missions,
  (val) => {
    try {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(val))
    } catch (e) {
      console.error('寫入任務失敗：', e)
    }
  },
  { deep: true }
)

function addMission() {
  if (!draft.value) return
  missions.value.unshift({
    id: Date.now(),
    text: draft.value,
    done: false
  })
  draft.value = ''
}

function removeMission(id) {
  missions.value = missions.value.filter(m => m.id !== id)
}
</script>

<style scoped>
.log { max-width: 600px; margin: 40px auto; font-family: system-ui; }
.done { text-decoration: line-through; opacity: .6; }
</style>

src/router/index.js：
記得加入

import MissionLog from '../views/MissionLog.vue'
{ path: '/missions', name: 'missions', component: MissionLog },

App.vue：
記得加上

<RouterLink to="/missions">🪐 星際任務日誌</RouterLink>

如此一來，我們重新刷新頁面時，原本打的任務日誌還是會記錄著！
參考資源
https://vuejs.org/guide
https://www.runoob.com/vue3